<template>
    <div>
        <!-- 多条件查询 -->
        <el-form :inline="true" :model="queryInfo">
            <el-form-item label="姓名">
                <el-input v-model="queryInfo.name" placeholder="请输入姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="queryInfo.phone" placeholder="请输入电话" clearable></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="queryInfo.status" placeholder="全部" clearable>
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadUsers">查询</el-button>
                <el-button type="success" @click="addDialogVisible = true">添加</el-button>
                <el-button type="danger">批量删除</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="userList" border stripe>
            <el-table-column label="序号" width="55" type="index"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="电话" prop="phone"></el-table-column>
            <el-table-column label="地址" prop="address"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="">编辑</el-button>
                    <el-button size="mini" type="danger" @click="">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 30, 50]" :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <!-- 添加对话框 -->
        <el-dialog title="添加用户" :visible.sync="addDialogVisible">
            <el-form :model="addForm" :rules="addFormRules" ref="ruleForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="addForm.address"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 查询条件
            queryInfo: {
                name: '',
                phone: '',
                status: '',
                pageNum: 1,
                pageSize: 5
            },
            // 用户列表
            userList: [],
            // 总条数
            total: 0,
            // 添加对话框的显示隐藏
            addDialogVisible: false,
            // 添加表单数据
            addForm: {
                name: '',
                phone: '',
                address: ''
            },
            // 添加表单验证规则
            addFormRules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 3, max: 5, message: '姓名长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' }
                ]
            }

        }
    },
    created() {
        this.loadUsers();
    },
    methods: {
        // 获取用户列表
        async loadUsers() {
            const { data: res } = await this.$http.get('/user/queryByPage', {
                params: this.queryInfo
            })
            if (res.status != 200) {
                return this.$message.error('获取用户列表失败')
            }
            this.total = res.data.total
            this.userList = res.data.list
            this.userList.forEach(item => {
                item.status = item.status == 1 ? true : false
            })
        },
        // 监听页大小的改变
        handleSizeChange(val) {
            this.queryInfo.pageSize = val
            this.loadUsers()
        },
        // 监听页码的改变
        handleCurrentChange(val) {
            this.queryInfo.pageNum = val
            this.loadUsers()
        },
        // 添加用户
        async addUser(){
            const {data:res} = await this.$http.post('/user/add', this.addForm)
            if(res.status !== 200){
                return this.$message.error('添加用户失败')
            }
            // 提示消息
            this.$message.success('添加用户成功')
            // 关闭对话框
            this.addDialogVisible = false
            // 重新加载数据
            this.loadUsers()
        }
    }
}
</script>

<style lang="less" scoped>
.el-pagination {
    margin-top: 10px;
}
</style>